<script>
import Header from "@/views/Components/Header/header.vue";
import Header1 from "@/views/Components/Header/header1.vue";
import Footer from "@/views/Components/Footer/footer.vue";
import {getCommoditiesByCategoryId, getCartCount} from '@/api/home/HomeService'
import {getToken} from "@/utils/auth";
export default {
    components: {
        Header,
        Header1,
        Footer
    },
    
    data() {
        return {
            userName: "翟玉龙",
            LeftBars: ["手机", "穿戴", "平板", "电脑", "耳机音箱", "智慧屏幕", "智能家居", "出行车品", "数码配件", "增值服务", "商用终端", "生态周边"],
            HeaderList: [
                {
                    href: "#",
                    title: "首页"
                },
                {
                    href: "#",
                    title: "消费者业务网站"
                },
                {
                    href: "#",
                    title: "优购码"
                },
                {
                    href: "#",
                    title: "企业商用"
                },
                {
                    href: "#",
                    title: "Select Region"
                }
            ],
            CommandList: [],
            ShopItemList: [ // 首页商品
                {
                    className: "main-i",
                    id: 33,
                    title: "甄选推荐",
                    list: [],
                    size: "4",
                    style1: "",
                    style2: ""
                },
                {
                    className: "main-p",
                    id: 18,
                    title: "手机专区",
                    list: [],
                    size: "",
                    style1: "",
                    style2: ""
                },
                {
                    className: "main-p",
                    id: 21,
                    title: "笔记本电脑",
                    list: [],
                    size: "",
                    style1: "",
                    style2: ""
                },
                {
                    className: "main-p",
                    id: 23,
                    title: "平板电脑",
                    list: [],
                    size: "",
                    style1: "",
                    style2: ""
                },
                {
                    className: "main-p",
                    id: 25,
                    title: "智能穿戴",
                    list: [],
                    size: "",
                    style1: "",
                    style2: ""
                },
                {
                    className: "main-p",
                    id: 27,
                    title: "智能家居",
                    list: [],
                    size: "",
                    style1: "",
                    style2: ""
                },
                {
                    className: "main-p",
                    id: 29,
                    title: "耳机音箱",
                    list: [],
                    size: "",
                    style1: "",
                    style2: ""
                },
                {
                    className: "main-p",
                    id: 31,
                    title: "出行车品",
                    list: [],
                    size: "",
                    style1: "",
                    style2: ""
                }
            ],
            num: 0,
            flag: true
        };
    },
    computed: {},
    watch: {},
    methods: {
        async GetItemsById(id) {
            let result = await getCommoditiesByCategoryId(id);
            return result.data;
        },
        // 跳转详情页
        toDetail(row, val) {
            const hasToken = getToken();
            if(hasToken) {
                this.$router.push({
                    name: "Detail",
                    query: {
                        id: row.id,
                        type: val.id
                    }
                });
            } else {
                this.$router.push("/login").catch(err => {})
            }
        },
        // 获取购物车数量
        async InitCartCount() {
            let result = await getCartCount();
            await this.$store.dispatch("updateCartCount", result.data);
            this.num = result.data;
        },
        // 加载主页数据
        InitHomeData() {
            const hasToken = getToken();
            if(hasToken) {
                this.ShopItemList.forEach(async (item, index)=> {
                    let result = await this.GetItemsById(item.id);
                    item.list = result;
                    item.size = Math.ceil(result.length / 4);
                    if(index >= 1) {
                        if(item.size >= 2) {
                            item.style1 = `height: ${item.size * 332 + 70}px`;
                        } else {
                            item.style1 = item.style2 = `height: ${item.size * 332 + 80}px`;
                        }
                    }
                })
            } else {
                this.$message({
                    message: "你还没有登录哦",
                    type: "error"
                })
                this.flag = false;
            }
            
        }
    },
    created() {
        this.InitCartCount();
        this.InitHomeData();
    },
    async mounted() {
        console.log(this.$store.getters.userInfo)
    },
}
</script>
<template>
    <div id="appCon">
        <Header :numS="num"></Header>
        <Header1></Header1>
        <div class="title">
            <div class="left_bar">
                <div class="left_bar">
                    <li v-for="(item, index) in LeftBars" :key="index">
                        {{ item }}
                        <svg width="12" height="12" viewBox="0 0 1024 1024">
                            <path
                                d="M329.354 820.029c-6.006 6.002-9.38 14.144-9.38 22.635s3.374 16.633 9.38 22.635c12.508 12.483 32.761 12.483 45.269 0l341.333-340.821c6.003-5.994 9.376-14.13 9.376-22.613s-3.373-16.619-9.376-22.613l-341.333-341.888c-12.508-12.483-32.761-12.483-45.269 0-6.006 6.002-9.38 14.144-9.38 22.635s3.374 16.633 9.38 22.635l318.72 319.232-318.72 318.165z">
                            </path>
                        </svg>
                    </li>
                </div>
            </div>
        </div>
        <div class="contain">
            <div class="items">
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/1.png" alt="">
                    </div>
                    <div>智慧办公</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/2.png" alt="">
                    </div>
                    <div>智能家居</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/3.png" alt="">
                    </div>
                    <div>鸿蒙智行</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/4.png" alt="">
                    </div>
                    <div>华为手机</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/5.png" alt="">
                    </div>
                    <div>影音娱乐</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/6.png" alt="">
                    </div>
                    <div>运动健康</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/7.png" alt="">
                    </div>
                    <div>企业商用</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/8.png" alt="">
                    </div>
                    <div>配件</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/9.png" alt="">
                    </div>
                    <div>全屋智能</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/10.png" alt="">
                    </div>
                    <div>她之选</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/11.png" alt="">
                    </div>
                    <div>以旧换新</div>
                </div>
                <div class="item">
                    <div class="item_img">
                        <img src="@/assets/images/source/12.png" alt="">
                    </div>
                    <div>华为智选</div>
                </div>
            </div>
            <div class="mid_logo">
                <img src="@/assets/images/copy.png" alt="">
            </div>
            <div class="main" v-if="flag">
                <div :style="x.style1" :class="x.className" v-for="(x , index) in ShopItemList" :key="100000 + index">
                    <div class="test">{{ x.title }}</div>
                    <div class="shop" :style="x.style2">
                        <div @click="toDetail(y, x)" class="shop-item" v-for="y in x.list" :key="y.id">
                            <img :src="y.cover" alt="">
                            <div class="s1">{{ y.name }}</div>
                            <div class="s2">{{ y.description }}</div>
                            <div class="s3">￥{{ y.price }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>


<style lang='scss' scoped>
@import url(../../assets/css/home.css);
</style>
